Radio Button
Overview
Radio button allows users to select one from a list.
There are three supported types:
- Label with text only (default)
- Label with icon
- Label with avatar
Radio button are displayed in a vertical layout by default, but can also be arranged horizontally when required.
A radio button supports four states:
- Unchecked (Default)
- Checked
- Disabled - unchecked
- Disabled - checked
Label with text only (default)
The radio button contains a label with text only.
Vertical List
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Horizontal List
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Label with icon
The radio button contains a label with an icon.
Vertical List
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Horizontal List
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Label with avatar
The radio button contains a label with an avatar.
Vertical List
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Horizontal List
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
User Experience
✨Box and label can be clickable.
✨Keep items in a logical order, whether alphabetically or categorically.
✨Press the Tab key to move focus to the next checkbox, following a left-to-right, top-to-bottom order.
✨Press the Space bar to select/deselect an item.
✨ Radio buttons allow users to select a single value and do not permit selecting multiple values at the same time.
Figma
All details and specifications in the design can be referenced through the Figma link below.